import { watch,isRef,onMounted,customRef } from "vue"
import { domObserver } from "../utils/dom"


/**
 * 防抖监听
 * @param {要监听的值} wValue 
 * @param {*回调函数} callback 
 * @param {*延迟时间} delay 
 */
export function Debouncing(wValue,callback,delay=2000) {
    let timer = null
    watch(wValue, (newValue) => {
        clearTimeout(timer)
        timer = setTimeout(() => {
            callback(newValue)
        }, delay);
    },{immediate:true}
    )
}

/**
 * 防抖
 * @param {*回调} callback 
 * @param {*延迟时间} delay 
 * @param {*首次触发} immediate 
 * @returns 
 */
export function debounce(callback,delay=1000,immediate=false) {
  let timeout = null
  
  return function () {
    if (timeout != null) {
      clearTimeout(timeout)
    }

    timeout = setTimeout(() => {
      callback.apply()
    },delay)
  }
}

/**
 * 防抖ref
 * @param value
 * @param delay
 * @returns
 */
export function useDebouncedRef(value, delay = 200) {
    let timeout = timeout || null
    return customRef((track, trigger) => {
      return {
        get() {
          track()
          return value
        },
        set(newValue) {
          timeout && clearTimeout(timeout)
          timeout = setTimeout(() => {
            value = newValue
            trigger()
          }, delay)
        }
      }
    })
}
  
/**
 * 节点入屏监听
 * @param {*需要监测的节点} el 
 * @param {*回调函数} callback 
 */
export function useDomObserver(el, callback) {
  onMounted(() => {
        const isV = isRef(el)
        if (!el || (isV && !el.value)) return
        domObserver(isV ? el.value : el,callback)
  })
}

/**
 * 节流
 * @param {*延迟时间} delay 
 * @param {*回调函数} callback 
 * @returns 
 */
export function throttle(delay=3000,callback) {
  let timer
  return () => {
    if (!timer) {
      timer = setTimeout(() => {
        callback()
        clearTimeout(timer)
      }, delay);
    }
  }
}

/**
 * 窗口大小变化监听
 * @param {*监听节点} el 
 * @param {*回调函数} callback 
 * @param {*是否先调用一次回调} immediate 
 */
export function useResizeListening(el, callback,immediate=true) {
  onMounted(() => {
    const isV = isRef(el)
    if (!el || (isV && !el.value)) return
    if (immediate) {
      callback()
    }
    window.addEventListener('resize',callback)
  })
}

/**
 * 时间戳转日期
 * @param {*时间戳} time 
 * @param {*日期格式} formatstr 
 * @returns 
 */
export function formatDate(time,formatstr) {
  function addZero(v,size) {
    for (let i = 0, len = size - (v + '').length; i < len; i++){
      v = '0' + v
    }

    return v+''
  }

  const arrweek=["日","一","二","三","四","五","六"];
  const date = new Date(time)
  const formatStr = formatstr.toLocaleLowerCase()
  /**
   * 年：Y|y
   * 月：M|m
   * 日：D|d
   * 时：h|H
   * 分：i|I
   * 秒：s|S
   * 周：w|W
   */
  let date_str = formatStr.replace('yyyy',date.getFullYear()).replace('yy',addZero(date.getFullYear()%100,2)).replace('mm',addZero(date.getMonth()+1,2)).replace('dd',addZero(date.getDate(),2)).replace('hh',addZero(date.getHours(),2)).replace('ii',addZero(date.getMinutes(),2)).replace('ss',addZero(date.getSeconds(),2)).replace('w',arrweek[date.getDay()])
  return date_str
  // return computed(() => {
    
  // })
}